<template>
  <div class="xix">
    <a-table
      row-key="assetsId"
      :loading="loading"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onChange1 }"
      :columns="columns"
      :data-source="dataSource"
      :pagination="{ pageSize: 10 }"
      @change="onChange2"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'assetsName'">
          <a class="overtext" @click="alertxixi(record)">{{ record.assetsName }}</a>
        </template>
        <template v-if="column.dataIndex === 'assetsEnglish'">
          <a class="overtext" @click="alertxixi(record)">{{ record.assetsEnglish }}</a>
        </template>
        <template v-if="column.dataIndex === 'assetsMsg'">
          <span class="overtext">{{ record.assetsEnglish }}</span>
        </template>
        <template v-if="column.dataIndex === 'assetsStatus'">
          <span v-if="record.assetsStatus == 1">未发布</span>
          <span v-if="record.assetsStatus == 2">已发布</span>
          <span v-if="record.assetsStatus == 3">已停用</span>
        </template>

        <template v-if="column.dataIndex === 'operation'">
          <a-popconfirm v-if="record.assetsStatus == 1 || record.assetsStatus == 3" class="aitems" cancel-text="否" ok-text="是" title="是否发布？" @confirm="release(record)">
            <a class="btna">发布</a>
          </a-popconfirm>
          <a-popconfirm v-if="record.assetsStatus == 1 || record.assetsStatus == 3" class="aitems" cancel-text="否" ok-text="是" title="是否编辑？" @confirm="showModal(record.assetsId)">
            <a class="btna">编辑</a>
          </a-popconfirm>
          <a-popconfirm v-if="record.assetsStatus == 2" class="aitems" cancel-text="否" ok-text="是" title="是否停用？" @confirm="Deactivate(record)">
            <a class="btna">停用</a>
          </a-popconfirm>
          <a-popconfirm v-if="record.assetsStatus == 1" class="aitems" cancel-text="否" ok-text="是" title="是否删除？" @confirm="onDelete(record.assetsId)">
            <a class="btna">删除</a>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <Deatil></Deatil>
  </div>
</template>
<script lang="ts">
  import { mit } from '../../utils/assetMittConfig';
  import { defineComponent, getCurrentInstance } from 'vue';
  import type { TableProps, TableColumnType } from 'ant-design-vue';
  import Deatil from './detailed-content.vue';
  import { useStore } from '@/store';
  import { useRouter } from 'vue-router';
  import { accountInfoApi, ApifoxModal, ModifyApifoxModal, BatchModify, deleteAsset, getCatalogue } from '../../api/test/asset';
  export default defineComponent({
    components: {
      Deatil,
    },
    setup() {
      const state = reactive<{
        selectedRowKeys: ModifyApifoxModal[];
        loading: boolean;
      }>({
        selectedRowKeys: [],
        loading: false,
      });
      const store = useStore();
      const router = useRouter();
      const columns: TableColumnType[] = [
        {
          title: '数据资产表中文名称',
          dataIndex: 'assetsName',
          key: 1,
        },
        {
          title: '数据资产表英文名称',
          dataIndex: 'assetsEnglish',
          key: 2,
        },
        {
          title: '数据资产表描述',
          dataIndex: 'assetsMsg',
          key: 3,
        },
        {
          title: '发布状态',
          dataIndex: 'assetsStatus',
          filters: [
            {
              text: '已发布',
              value: 2,
            },
            {
              text: '未发布',
              value: 1,
            },
            {
              text: '已停用',
              value: 3,
            },
          ],
          onFilter: (value: any, record: any) => record.assetsStatus == value,
          key: 4,
        },
        {
          title: '更新时间',
          dataIndex: 'modifyTime',
          key: 5,
          sorter: (a: any, b: any) => new Date(a.addTime).getTime() - new Date(b.addTime).getTime(),
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 6,
        },
      ];

      const dataSource: any = ref([]);
      let data1: ApifoxModal[] = [];
      //请求模块
      const getTableData = async () => {
        state.loading = true;
        let a: any = await accountInfoApi({});
        data1 = a.data;
        console.log(data1);
        dataSource.value = data1;
        state.loading = false;
      };
      const deleteAssetother = async (id: any) => {
        state.loading = true;
        let data = await deleteAsset(id);
        state.loading = false;
      };
      const getAllCatalogue = async () => {
        let data = await getCatalogue();
      };
      getAllCatalogue();
      getTableData();
      //这里是打印被选择的关键key
      const onChange1 = (selectedRowKeys: any) => {
        state.selectedRowKeys = selectedRowKeys;
      };
      //获取table渲染的当前数组
      const onChange2: TableProps<TableDataType>['onChange'] = (pagination, filters, sorter, currentDataSource) => {
        console.log('params', pagination, filters, sorter);
        console.log(currentDataSource);
      };
      // 删除按钮
      const onDelete = async (baseId: any) => {
        state.loading = true;
        dataSource.value = dataSource.value.filter(item => item.assetsId !== baseId);
        await deleteAssetother(baseId);
      };
      state.loading = false;
      // 停用
      const Deactivate = async (xixi: any) => {
        state.loading = true;
        dataSource.value.map(e => {
          if (e.assetsId == xixi.assetsId) {
            e.assetsStatus = 3;
          }
        });
        await BatchModify({ assetsIds: [xixi.assetsId], assetsStatus: xixi.assetsStatus });
        state.loading = false;
      };
      // 发布
      const release = async (xixi: any) => {
        state.loading = true;
        dataSource.value.map(e => {
          if (e.assetsId == xixi.assetsId) {
            e.assetsStatus = 2;
          }
        });
        await BatchModify({ assetsIds: [xixi.assetsId], assetsStatus: xixi.assetsStatus });
        state.loading = false;
        console.log('hou');
      };
      // 编辑
      const showModal = (xixi: any) => {
        router.push({ path: '/home/addAss', query: { state: '编辑', id: xixi } });
      };

      //组件通信模块
      mit.on('batchRelease', async (code: any) => {
        state.loading = true;
        let a = await BatchModify({ assetsIds: state.selectedRowKeys, assetsStatus: code });
        state.selectedRowKeys.forEach(li => {
          dataSource.value.map(e => {
            if (e.assetsId == li) {
              e.assetsStatus = code;
            }
          });
        });
        state.selectedRowKeys = [];
        state.loading = false;
      });
      //接收搜索数据
      mit.on('loadtrue', () => {
        state.loading = !state.loading;
      });
      mit.on('serachdata', (data: any) => {
        dataSource.value = data;
      });
      //重置
      mit.on('reset', () => {
        getTableData();
      });
      //点击目录刷新数据
      mit.on('accoundCatalogueFlash', (data: any) => {
        dataSource.value = data;
      });
      // 详情弹窗
      // @ts-ignore
      let { proxy } = getCurrentInstance();
      const alertxixi = (xixixi: any) => {
        proxy.$mybus.emit('setdatatable', xixixi.assetsId);
      };
      const handleOktest = (e: MouseEvent) => {
        console.log(e);
      };

      return {
        onChange2,
        ...toRefs(state),
        handleOktest,
        alertxixi,
        onDelete,
        dataSource,
        columns,
        onChange1,
        Deactivate,
        release,
        showModal,
      };
    },
  });
</script>
<style scoped>
  .xix {
    width: 100%;
  }

  .btna {
    margin-left: 10px;
  }

  .overtext {
    display: inline-block;
    overflow: hidden;
    width: 120px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
